<template>
  <div class="app-container">
    <el-scrollbar style="height: 100%;">
      <div class="dataPage-box">
        <div
          class="new-flex"
          v-for="(item,index) in newList"
          :key="index"
          v-if="item.isShow || isType == 2"
        >
          <div class="new-nma" :class="{'newRed': 0 == index}">{{item.name}}：</div>
          <div class="new-flon2">
            <el-button v-for="(val,index) in item.list" :key="index">{{val}}</el-button>
          </div>
        </div>
        <div class="new-ned">
          <div class="new-right">
            <span id="newid" @click="newid()">
              更多选项
              <img
                class="newImg"
                :class="{'typeName':isType == 2}"
                src="../images/xiaosanjiao.png"
              >
            </span>
          </div>
        </div>
        <div class="newtype">
          <div id="tagsList">
            <div style="position:absolute;margin-top: -18px;color:#999; ">数据图云</div>
            <a href="javascript:;" title="分省">分省</a>
            <a href="javascript:;" title="层特效">层特效</a>
            <a href="javascript:;" title="关键字">关键字</a>
            <a href="javascript:;" title="仪表">仪表</a>
            <a href="javascript:;" title="气象">气象</a>
            <a href="javascript:;" title="档案">档案</a>
            <a href="javascript:;" title="仪表">仪表</a>
            <a href="javascript:;" title="数据统计">数据统计</a>
            <a href="javascript:;" title="业务系统">业务系统</a>
            <a href="javascript:;" title="企业">企业</a>
            <a href="javascript:;" title="统计数据">统计数据</a>
          </div>
          <div class="new-flex" style="margin-bottom: 20px;">
            <div class="new-flon22" >
              <span style="margin-right:20px">
                数据检索：
                 <el-input v-model="input1" placeholder="请输入关键字"></el-input>
                <!-- <input placeholder="请输入关键字" style="width:200px"> -->
              </span>
              <span style="margin-right:20px">
                时间范围：
                <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                <!-- <input style="width:170px"> ~ -->
                <!-- <input style="width:170px"> -->
              </span>
              <span id="neID">
                <el-button>搜索</el-button>
                <el-button>重置</el-button>
              </span>
              <div class="new-bott">
                <div style="margin-left: 0">暂无数据</div>
                <div>暂无数据</div>
                <div style="margin-right: 0">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import { textAnimate1 } from "../js/textAnimate";

export default {
  mounted() {
    this.$store.commit("rdefaultActive", "keyword");
  },
  data() {
    return {
      isType: 1,
      input1:"",
      value6:'',
      newList: [
        {
          name: "关键字搜索",
          isShow: true,
          list: [
            "全部",
            "分省",
            " 分市",
            " 分县",
            " 统计数据",
            " 仪表",
            " 气象",
            " 水质 ",
            "水压",
            " 气象 ",
            "档案 ",
            "企业 ",
            "业务系统"
          ]
        },
        {
          name: "空间位置",
          isShow: true,
          list: ["全部", "中国", " 四川", " 桐梓县"]
        },
        {
          name: "数据类型",
          isShow: false,
          list: ["全部", "河流", " 气候", " 库区", " 生产", " 管网", " 仪表"]
        },
        {
          name: "数据生产方式",
          isShow: false,
          list: [
            "全部",
            "业务系统",
            " 矢量",
            " 实时",
            "影像",
            " 图片",
            "电子表格"
          ]
        },
        {
          name: "时间分辨率",
          isShow: false,
          list: ["全部", "年", "月", "日", "时"]
        },
        {
          name: "空间尺度",
          isShow: false,
          list: ["全部", "省级尺度", " 县级尺度", " 县级以下"]
        },
        {
          name: "比例尺",
          isShow: false,
          list: [
            "全部",
            "1:25万",
            "1:100万 ",
            "1:400万 ",
            "1:400万以下",
            "1:10万"
          ]
        }
      ]
    };
  },
  mounted() {
    textAnimate1();
  },
  methods: {
    newid() {
      var _this = this;
      if (_this.isType == 1) {
        _this.isType = 2;
      } else {
        _this.isType = 1;
      }
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.new-flex {
  display: flex;
  .new-nma {
    line-height: 32px;
    min-width: 170px;
    text-align: center;
  }
  .newRed {
    line-height: 64px;
  }
  .new-flon2 {
    button {
      height: 28px;
      margin: 0 0 15px 10px;
    }
    button:nth-child(1) {
      border: 1px solid rgb(25, 142, 248);
    }
  }
}
.new-right {
  text-align: center;
  position: relative;
  #newid {
    cursor: pointer;
  }
  .newImg {
    position: absolute;
    margin-top: -10px;
    transform: rotate(0deg);
  }
  .typeName {
    transform: rotate(180deg);
  }
}
#tagsList{
    position: relative;
    min-width: 180px;
    height: 236px;
    padding-left: 20px;
    a {
        position: absolute;
        top: 0px;
        white-space : nowrap;
        left: 0px;
        color: #4d4d4d;
        text-decoration: none;
        padding: 3px 0;
        font-size: 12px;
    }
    a:hover {
        color: #FF0000;
        letter-spacing: 2px;
    }
}
.newtype {
  position: relative;
  display: flex;
  .new-bott {
    display: flex;
    margin-top: 15px;
    div {
      height: 150px;
      width: 30%;
      border: 1px solid #f1f1f1;
      border-radius: 4px;
      margin: 0 auto;
      text-align: center;
      line-height: 150px;
    }
  }
  .new-flon22{
    input{
      line-height: 30px;
      height: 30px;
      border-radius: 4px;
      padding: 0 10px;
      border: 1px solid #999999;
    }
    input:focus{
      border-radius: 4px;
    }
    .el-input{
        width: 200px;
    }
  }
}
</style>

